import Vue from 'vue'
const downloadAddress = process.env.NODE_ENV === 'development' ? 'http://188.188.33.26/fileupload' : '../fileupload/'

Vue.directive('down', {
  inserted: (el, binding) => {
    el.style.cssText = 'cursor: pointer;'
    el.addEventListener('click', () => {
      const link = document.createElement('a')
      const url = downloadAddress + binding.value

      // 这里是将url转成blob地址，
      fetch(url)
        .then(res => res.blob())
        .then(blob => {
          // 将链接地址字符内容转变成blob地址
          link.href = URL.createObjectURL(blob)
          console.log(link.href)
          link.download = ''
          document.body.appendChild(link)
          link.click()
        })
    })
  }
})

const pointDoms = [] // 使用这个指令的所有DOM对象
Vue.directive('points', {
  inserted(el, binding) {
    pointDoms.push(el) // 存储使用这个指令的DOM
    el.addEventListener('click', () => {
      // 禁用所有使用这个指令的DOM结构点击事件
      pointDoms.forEach(pointItem => {
        pointItem.style.pointerEvents = 'none'
      })
      setTimeout(() => {
        // 启动所有使用这个指令的DOM结构点击事件
        pointDoms.forEach(pointItem => {
          pointItem.style.pointerEvents = 'auto'
        })
      }, binding.value || 350)
    })
  }
})

Vue.directive('drag', {
  // 1.指令绑定到元素上回立刻执行bind函数，只执行一次
  // 2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
  // 3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
  bind: function (el) {},
  // inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
  inserted: function (el) {
    // 起始位置
    let disx
    let disy
    // 屏幕宽高
    const clientWidth = document.documentElement.clientWidth
    const clientHeight = document.documentElement.clientHeight
    // 按下
    el.ontouchstart = function (e) {
      disx = e.touches[0].pageX - el.offsetLeft
      disy = e.touches[0].pageY - el.offsetTop
    }
    // 移动
    el.ontouchmove = function (e) {
      // 元素宽高
      const elWidth = el.clientWidth
      const elHeight = el.clientHeight
      // 移动结束位置
      const posx = e.touches[0].pageX - disx
      const posy = e.touches[0].pageY - disy
      let left = posx
      let top = posy
      // 判断位置是否（位置+元素宽度）大于屏幕宽度（代表溢出屏幕）
      if (posx + elWidth > clientWidth) {
        left = clientWidth - elWidth
      }
      // 判断位置是否（位置+元素高度）大于屏幕高度（代表溢出屏幕）
      if (posy + elHeight > clientHeight) {
        top = clientHeight - elHeight
      }
      el.style.left = left < 0 ? 0 : left + 'px'
      el.style.top = top < 0 ? 0 : top + 'px'
    }
  },
  // 当VNode更新的时候会执行updated，可以触发多次
  updated: function (el) {}
})
